<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树洞 - 发现真实的声音</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --secondary-light: #FCE7F3;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
            --border: #E5E7EB;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F3F4F6;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .search-input {
            background-color: var(--light);
            border: 1px solid var(--border);
            border-radius: 30px;
            padding: 8px 20px;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 页面标题 */
        .page-header {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        /* 分类导航 */
        .category-nav {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            padding-bottom: 1rem;
            margin-bottom: 2rem;
            scrollbar-width: none;
        }
        
        .category-nav::-webkit-scrollbar {
            display: none;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            background-color: white;
            border-radius: 30px;
            border: 1px solid var(--border);
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 树洞卡片通用样式 */
        .post-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .post-header {
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .post-content {
            padding: 1.25rem;
            font-size: 1rem;
            line-height: 1.7;
        }
        
        .post-actions {
            padding: 0.75rem 1.25rem;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--border);
            background-color: var(--light);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
            background: none;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 布局1：无图片树洞 */
        .post-type-1 .post-content {
            min-height: 100px;
        }
        
        /* 布局2：单张图片树洞 */
        .post-type-2 .post-image {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
        }
        
        /* 布局3：多张图片树洞（网格） */
        .post-type-3 .post-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .post-type-3 .post-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }
        
        .post-type-3 .image-count-3,
        .post-type-3 .image-count-4 {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .post-type-3 .image-count-5,
        .post-type-3 .image-count-6 {
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* 布局4：大图+小图组合 */
        .post-type-4 .post-images {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 4px;
            height: 300px;
        }
        
        .post-type-4 .main-image {
            grid-column: 1;
            grid-row: 1 / 3;
            height: 100%;
            object-fit: cover;
        }
        
        .post-type-4 .sub-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 布局5：左侧内容右侧图片 */
        .post-type-5 {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        
        .post-type-5 .post-content-container {
            display: flex;
            flex-direction: column;
        }
        
        .post-type-5 .post-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .post-type-5 {
                grid-template-columns: 1fr;
            }
            
            .post-type-5 .post-image {
                height: 250px;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.5rem;
            }
            
            .post-type-4 .post-images {
                height: 250px;
            }
        }
        
        /* 瀑布流布局 */
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }
        
        /* 双列布局 */
        .two-column-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        
        /* 切换布局按钮 */
        .layout-controls {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .layout-btn {
            padding: 0.5rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .layout-btn:hover, .layout-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 0.75rem 2rem;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 浮动发布按钮 */
        .float-post-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .float-post-btn:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">树洞</a>
            
            <div class="search-bar mx-auto">
                <input type="text" class="form-control search-input" placeholder="搜索树洞、话题或用户...">
            </div>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">推荐树洞</h1>
            <p class="page-description">发现身边真实的声音和故事</p>
        </div>
        
        <!-- 布局切换控制 -->
        <div class="layout-controls">
            <button class="layout-btn active" id="listLayoutBtn" title="列表布局">
                <i class="fas fa-list"></i>
            </button>
            <button class="layout-btn" id="gridLayoutBtn" title="网格布局">
                <i class="fas fa-th"></i>
            </button>
            <button class="layout-btn" id="masonryLayoutBtn" title="瀑布流布局">
                <i class="fas fa-th-large"></i>
            </button>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
            <div class="category-item active">全部</div>
            <div class="category-item">情感</div>
            <div class="category-item">生活</div>
            <div class="category-item">职场</div>
            <div class="category-item">校园</div>
            <div class="category-item">家庭</div>
            <div class="category-item">兴趣</div>
            <div class="category-item">思考</div>
            <div class="category-item">秘密</div>
            <div class="category-item">求助</div>
        </div>
        
        <!-- 树洞内容区 - 默认列表布局 -->
        <div class="posts-container" id="postsContainer">
            <!-- 布局1：无图片树洞 -->
            <div class="post-card post-type-1">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">匿名用户753</div>
                        <div class="post-time">2小时前 · 浏览 356</div>
                    </div>
                </div>
                <div class="post-content">
                    今天终于鼓起勇气辞职了，虽然不知道未来会怎样，但至少摆脱了那个令人窒息的工作环境。每天加班到深夜，领导只会画饼，同事之间勾心斗角，感觉自己快要抑郁了。也许休息一段时间，重新思考一下自己真正想做什么会更好。有没有同样经历的人，能给我一点建议？
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>89</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>24</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 布局2：单张图片树洞 -->
            <div class="post-card post-type-2">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">星辰大海</div>
                        <div class="post-time">昨天 18:30 · 浏览 1243</div>
                    </div>
                </div>
                <div class="post-content">
                    周末去了郊外的湖边，没想到看到了这么美的日落。忙碌了一周，此刻终于可以静下心来，感受大自然的美好。有时候觉得，我们太容易被生活中的琐事困扰，而忽略了身边这些简单的幸福。
                </div>
                <img src="https://picsum.photos/800/500?random=10" alt="湖边日落" class="post-image">
                <div class="post-actions">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>327</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>46</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 布局3：3张图片树洞（网格） -->
            <div class="post-card post-type-3 image-count-3">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">美食探险家</div>
                        <div class="post-time">3天前 · 浏览 2156</div>
                    </div>
                </div>
                <div class="post-content">
                    周末在家尝试做了三道新菜：番茄牛腩、香煎三文鱼和草莓慕斯。虽然过程有点手忙脚乱，但看到成品出来的那一刻真的很有成就感！味道居然还不错，看来我的厨艺有进步了，开心～
                </div>
                <div class="post-images">
                    <img src="https://picsum.photos/400/400?random=20" alt="番茄牛腩" class="post-image">
                    <img src="https://picsum.photos/400/400?random=21" alt="香煎三文鱼" class="post-image">
                    <img src="https://picsum.photos/400/400?random=22" alt="草莓慕斯" class="post-image">
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>542</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>89</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 布局4：大图+小图组合 -->
            <div class="post-card post-type-4">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">旅行日记</div>
                        <div class="post-time">5天前 · 浏览 3241</div>
                    </div>
                </div>
                <div class="post-content">
                    终于踏上了期待已久的云南之旅，这是我见过最美的地方之一。天空蓝得不像话，空气清新，当地人也很热情。这只是第一天的照片，已经迫不及待想探索更多地方了！
                </div>
                <div class="post-images">
                    <img src="https://picsum.photos/600/800?random=30" alt="云南风景" class="main-image">
                    <img src="https://picsum.photos/300/300?random=31" alt="当地建筑" class="sub-image">
                    <img src="https://picsum.photos/300/300?random=32" alt="特色美食" class="sub-image">
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>786</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>124</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 布局5：左侧内容右侧图片 -->
            <div class="post-card post-type-5">
                <div class="post-content-container">
                    <div class="post-header">
                        <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">深夜思考者</div>
                            <div class="post-time">1周前 · 浏览 1876</div>
                        </div>
                    </div>
                    <div class="post-content">
                        最近一直在思考人生的意义，可能是到了某个阶段都会有的困惑吧。我们每天努力工作，追求更好的生活，但到底什么才是真正重要的？是金钱、地位，还是家庭、健康，或者是内心的平静？

                        有时候觉得自己像个陀螺，不停地旋转，却不知道最终要去哪里。也许人生本没有固定的意义，意义是我们自己赋予的？

                        有没有人也有过类似的思考，想听听大家的想法。
                    </div>
                    <div class="post-actions">
                        <button class="action-btn like-btn">
                            <i class="far fa-heart"></i>
                            <span>432</span>
                        </button>
                        <button class="action-btn comment-btn">
                            <i class="far fa-comment"></i>
                            <span>156</span>
                        </button>
                        <button class="action-btn share-btn">
                            <i class="far fa-share-square"></i>
                            <span>分享</span>
                        </button>
                        <button class="action-btn save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                    </div>
                </div>
                <img src="https://picsum.photos/600/800?random=40" alt="星空" class="post-image">
            </div>
            
            <!-- 更多树洞示例 -->
            <div class="post-card post-type-1">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=6" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">职场新人</div>
                        <div class="post-time">2天前 · 浏览 987</div>
                    </div>
                </div>
                <div class="post-content">
                    作为一个职场新人，感觉每天都在踩坑。今天又因为不了解公司流程，犯了一个低级错误，被领导当众批评了，感觉特别尴尬和沮丧。

                    有没有职场前辈能给点建议，新人应该如何快速适应环境，避免犯不必要的错误？如何处理被批评后的心态？
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>215</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>78</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <div class="post-card post-type-3 image-count-6">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=7" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">铲屎官日常</div>
                        <div class="post-time">4天前 · 浏览 2567</div>
                    </div>
                </div>
                <div class="post-content">
                    我家猫咪今天满一岁啦！整理了这一年来它的萌照，从刚到家时的小不点长成了现在的大胖猫。虽然偶尔会调皮捣蛋，把家里弄得一团糟，但更多的时候是治愈我的小天使。有猫的日子真的很幸福～
                </div>
                <div class="post-images">
                    <img src="https://picsum.photos/300/300?random=50" alt="猫咪照片1" class="post-image">
                    <img src="https://picsum.photos/300/300?random=51" alt="猫咪照片2" class="post-image">
                    <img src="https://picsum.photos/300/300?random=52" alt="猫咪照片3" class="post-image">
                    <img src="https://picsum.photos/300/300?random=53" alt="猫咪照片4" class="post-image">
                    <img src="https://picsum.photos/300/300?random=54" alt="猫咪照片5" class="post-image">
                    <img src="https://picsum.photos/300/300?random=55" alt="猫咪照片6" class="post-image">
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>987</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>132</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">加载更多</button>
    </div>
    
    <!-- 发布树洞浮动按钮 -->
    <button class="float-post-btn" title="发布新树洞">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 评论模态框 -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">评论区</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 评论输入框 -->
                    <div class="mb-4">
                        <textarea class="form-control" placeholder="写下你的评论..."></textarea>
                        <div class="d-flex justify-content-end mt-2">
                            <button class="btn btn-primary">发布评论</button>
                        </div>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div class="comments-list">
                        <!-- 评论1 -->
                        <div class="comment-item mb-4 pb-4 border-bottom">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/100/100?random=60" alt="评论者头像" class="author-avatar">
                                <div class="flex-1">
                                    <div class="d-flex justify-content-between">
                                        <h6 class="author-name">阳光灿烂</h6>
                                        <span class="post-time">1天前</span>
                                    </div>
                                    <div class="comment-content mt-1">
                                        我也有过类似的经历，辞职后的那段时间虽然焦虑，但也让我有机会重新认识自己，找到真正适合的方向。相信你也能找到属于自己的道路！
                                    </div>
                                    <div class="comment-actions mt-2">
                                        <button class="action-btn like-btn">
                                            <i class="far fa-heart"></i>
                                            <span>15</span>
                                        </button>
                                        <button class="action-btn reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论2 -->
                        <div class="comment-item mb-4 pb-4 border-bottom">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/100/100?random=61" alt="评论者头像" class="author-avatar">
                                <div class="flex-1">
                                    <div class="d-flex justify-content-between">
                                        <h6 class="author-name">过来人</h6>
                                        <span class="post-time">2天前</span>
                                    </div>
                                    <div class="comment-content mt-1">
                                        建议先休息一两周调整状态，然后列出自己的优势和兴趣，再针对性地寻找机会。不要急于做出决定，给自己一些时间和空间。
                                    </div>
                                    <div class="comment-actions mt-2">
                                        <button class="action-btn like-btn liked">
                                            <i class="fas fa-heart"></i>
                                            <span>23</span>
                                        </button>
                                        <button class="action-btn reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                    
                                    <!-- 评论回复 -->
                                    <div class="replies mt-3 ms-4">
                                        <div class="d-flex gap-2">
                                            <img src="https://picsum.photos/100/100?random=1" alt="原作者头像" class="author-avatar" style="width: 30px; height: 30px;">
                                            <div class="flex-1">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="author-name">匿名用户753 <span class="text-primary" style="font-size: 0.7rem;">(作者)</span></h6>
                                                    <span class="post-time">1天前</span>
                                                </div>
                                                <div class="comment-content mt-1" style="font-size: 0.9rem;">
                                                    谢谢你的建议，我确实打算先休息一段时间，调整一下状态再做打算。
                                                </div>
                                                <div class="comment-actions mt-1">
                                                    <button class="action-btn like-btn">
                                                        <i class="far fa-heart"></i>
                                                        <span>5</span>
                                                    </button>
                                                    <button class="action-btn reply-btn">
                                                        <i class="far fa-reply"></i>
                                                        <span>回复</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 布局切换功能
        const postsContainer = document.getElementById('postsContainer');
        const listLayoutBtn = document.getElementById('listLayoutBtn');
        const gridLayoutBtn = document.getElementById('gridLayoutBtn');
        const masonryLayoutBtn = document.getElementById('masonryLayoutBtn');
        
        // 列表布局
        listLayoutBtn.addEventListener('click', function() {
            postsContainer.className = 'posts-container';
            setActiveLayoutBtn(this);
        });
        
        // 网格布局
        gridLayoutBtn.addEventListener('click', function() {
            postsContainer.className = 'posts-container two-column-layout';
            setActiveLayoutBtn(this);
        });
        
        // 瀑布流布局
        masonryLayoutBtn.addEventListener('click', function() {
            postsContainer.className = 'posts-container masonry-grid';
            setActiveLayoutBtn(this);
        });
        
        // 设置活跃的布局按钮
        function setActiveLayoutBtn(btn) {
            document.querySelectorAll('.layout-btn').forEach(b => {
                b.classList.remove('active');
            });
            btn.classList.add('active');
        }
        
        // 分类切换
        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.category-item').forEach(i => {
                    i.classList.remove('active');
                });
                this.classList.add('active');
                // 这里可以添加分类筛选逻辑
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                let count = parseInt(countElem.textContent);
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    countElem.textContent = count - 1;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    countElem.textContent = count + 1;
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                }
            });
        });
        
        // 评论功能 - 打开评论模态框
        document.querySelectorAll('.comment-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const commentModal = new bootstrap.Modal(document.getElementById('commentModal'));
                commentModal.show();
            });
        });
        
        // 分享功能
        document.querySelectorAll('.share-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                alert('分享功能：可以分享到微信、微博、QQ等平台');
            });
        });
        
        // 加载更多功能
        document.querySelector('.load-more').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                // 复制现有树洞作为新内容（实际应用中会从服务器请求）
                const existingPosts = document.querySelectorAll('.post-card');
                const randomIndex = Math.floor(Math.random() * existingPosts.length);
                const clonedPost = existingPosts[randomIndex].cloneNode(true);
                
                // 修改一些内容以模拟新树洞
                const randomNum = Math.floor(Math.random() * 1000);
                clonedPost.querySelector('.author-avatar').src = `https://picsum.photos/100/100?random=${70 + randomNum}`;
                clonedPost.querySelector('.post-time').textContent = `${Math.floor(Math.random() * 7) + 1}天前 · 浏览 ${Math.floor(Math.random() * 3000)}`;
                
                // 重置交互状态
                clonedPost.querySelectorAll('.action-btn').forEach(btn => {
                    btn.classList.remove('liked', 'saved');
                    const icon = btn.querySelector('i');
                    if (icon.classList.contains('fas')) {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
                
                // 添加到容器
                postsContainer.appendChild(clonedPost);
                
                // 重新绑定事件
                bindEventsToNewPost(clonedPost);
                
                this.innerHTML = '加载更多';
            }, 1500);
        });
        
        // 为新添加的树洞绑定事件
        function bindEventsToNewPost(post) {
            // 点赞
            post.querySelector('.like-btn').addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                let count = parseInt(countElem.textContent);
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    countElem.textContent = count - 1;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    countElem.textContent = count + 1;
                }
            });
            
            // 收藏
            post.querySelector('.save-btn').addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                }
            });
            
            // 评论
            post.querySelector('.comment-btn').addEventListener('click', function() {
                const commentModal = new bootstrap.Modal(document.getElementById('commentModal'));
                commentModal.show();
            });
            
            // 分享
            post.querySelector('.share-btn').addEventListener('click', function() {
                alert('分享功能：可以分享到微信、微博、QQ等平台');
            });
        }
        
        // 发布新树洞按钮
        document.querySelector('.float-post-btn').addEventListener('click', function() {
            alert('打开发布树洞的表单');
            // 实际应用中这里会打开发布树洞的模态框
        });
    </script>
</body>
</html>

